「Flutterアプリで静止テキストを表示したい」
こんな時に便利なのが Text ウィジェットです。
Textを使用することでFlutterアプリにテキストを表示できます。またTextStyleウィジェットを使えば文字の大きさや色、太さなど様々な装飾ができます。
それではTextの基本的な使い方とカスタマイズ方法について解説していきます！
目次基本的な使い方Textの基本的な使い方について解説します。
テキストを表示するにはTextの引数に表示したい文字列を渡すだけです。
Text('Hello World'),画像のサンプルコードimport 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) {return const MaterialApp( home: MyWidget(),); }}class MyWidget extends StatelessWidget { const MyWidget({super.key}); @override Widget build(BuildContext context) {return Scaffold( appBar: AppBar(title: const Text('Flutter')), body: Center(child: Text('Hello World'), ),); }}
カスタマイズ方法続いてTextのカスタマイズ方法について解説します。
Textの基本的な装飾はstyleプロパティの引数にTextStyleウィジェットを渡して設定できます。
Text( 'Hello World', style: TextStyle(// ここで様々な装飾ができる ),),文字の大きさ（フォントサイズ）テキストの大きさはTextStyleのfontSizeプロパティで設定できます。
Text( 'Hello World', style: TextStyle(fontSize: 50, ),),テキストの色・背景色テキストの色はTextStyleのcolorプロパティ、背景色はbackgroundColorプロパティで設定できます。
Text( 'Hello World', style: TextStyle(color: Colors.white,backgroundColor: Colors.blue, ),),文字の太さ（フォントウェイト）テキストの太さはTextStyleのfontWeightプロパティで設定できます。
単に文字を太くするだけならfontWeightプロパティの引数にFontWeight.boldを渡し、好みの太さに調整したい場合はFontWeight.w100のように「w100(細い)」から「w900(太い)」の100単位で太さを指定できます。
Text( 'Hello World', style: TextStyle(fontWeight: FontWeight.Bold, ),),イタリック（斜体）にするテキストをイタリックで表示するにはTextStyleのfontStyleプロパティにFontStyle.italicを渡します。
Text( 'Hello World', style: TextStyle(fontStyle: FontStyle.italic, ),),まとめ今回はTextの基本的な使い方とカスタマイズ方法について解説しました。
Textを使用することでFlutterアプリにテキストを表示できます。またTextStyleウィジェットを使えば文字の大きさや色、太さなど様々な装飾ができるのでぜひ使ってみてください。
参考サイトhttps://api.flutter.dev/flutter/widgets/Text-class.html